import React, { Component } from 'react'
import PropTypes from 'prop-types'
import MainPartOne from './MainPartOne'

export class Main extends Component {
  // 子组件通过 props 接收父组件传来的数据
  constructor(props) {
    super(props)

    this.state = {}
  }

  render() {
    // 父组件传过来的数据：
    console.log(this.props)
    const { mainArr } = this.props
    return (
      <div>
        <div>这里是Main部分</div>
        <div>App组件传到Main组件的props数据（父传子）</div>
        <ul>
          {mainArr.map((item) => {
            return <li key={item}>{item}</li>
          })}
        </ul>
        Main的子组件（组件嵌套）：
        <MainPartOne />
      </div>
    )
  }
}

// propsType 验证
Main.propTypes = {
  mainArr: PropTypes.array.isRequired
}

// props 的默认值（一般当父组件没有传过来值的时候会显示默认值）
Main.defaultProps = {
  mainArr: ['默认值']
}

export default Main
